import React, { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Card, Tag, Tabs, Button, Toast } from 'antd-mobile';
import axios from '../../axios';
import { io, Socket } from 'socket.io-client';
import './Com/Coupon.css';

// 优惠券数据类型
interface Coupon {
  _id: string;
  id: string;
  userId: string;
  couponId: string;
  name: string;
  type: string;
  discount: number;
  minAmount: number;
  category: string;
  status: '可使用' | '已使用' | '已过期';
  startTime: string;
  endTime: string;
  description: string;
  createdAt: string;
  updatedAt: string;
  usedTime?: string|null;
  usedOrderId?: string;
}

const Coupon: React.FC = () => {
  const navigate = useNavigate();
  const [coupons, setCoupons] = useState<Coupon[]>([]);
  const [loading, setLoading] = useState(true);
  const socketRef = useRef<Socket | null>(null);

  const handleBack = () => {
    navigate('/app/my');
  };

  // 处理优惠券使用
  const handleUseCoupon = (coupon: Coupon) => {
    // 这里可以跳转到商品页面或者显示可使用的商品
    console.log('使用优惠券:', coupon);
    // 示例：跳转到商品页面
    // navigate('/products', { state: { coupon } });
  };

  // 获取优惠券数据
  const fetchCoupons = async () => {
    try {
      setLoading(true);
      
      // 从localStorage获取用户ID
      const yonghuId = localStorage.getItem('yonghuId');
      if (!yonghuId) {
        console.error('未找到用户ID，请重新登录');
        setLoading(false);
        return;
      }
      
      console.log('正在获取用户优惠券，用户ID:', yonghuId);
      
      // 调用用户数据API获取优惠券
      const response = await axios.get(`http://localhost:3000/hy/yonghu/${yonghuId}`);
      
      if (response.data.code === 200 && response.data.data) {
        setCoupons(response.data.data.coupons || []);
        console.log('获取到的优惠券数据:', response.data.data.coupons);
      } else {
        console.error('API返回错误:', response.data.message);
      }
    } catch (error) {
      console.error('获取优惠券数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 初始化数据和WebSocket连接
  useEffect(() => {
    // 获取用户ID
    const yonghuId = localStorage.getItem('yonghuId');
    if (!yonghuId) {
      console.error('未找到用户ID');
      return;
    }

    console.log('正在建立WebSocket连接...');
    
    // 创建WebSocket连接
    const socket = io('http://localhost:3000');
    socketRef.current = socket;

    // 连接成功
    socket.on('connect', () => {
      console.log('WebSocket连接成功:', socket.id);
      
      // 连接成功后，立即请求检查当前用户的优惠券
      console.log('请求检查当前用户优惠券过期状态...');
      socket.emit('check_my_coupons', { userId: yonghuId });
    });

    // 连接错误
    socket.on('connect_error', (error) => {
      console.error('WebSocket连接错误:', error);
    });

    // 监听优惠券过期通知
    socket.on('coupon_expired', (data) => {
      console.log('收到优惠券过期通知:', data);
      if (data.userId === yonghuId) {
        console.log('当前用户有优惠券过期，重新获取数据...');
        Toast.show(`您有 ${data.expiredCount || 1} 张优惠券已过期`);
        // 重新获取优惠券列表
        fetchCoupons();
      }
    });

    // 监听红包领取通知
    socket.on('redpacket_notification', (data) => {
      console.log('收到红包领取通知:', data);
      if (data.userId === yonghuId) {
        Toast.show(`恭喜您获得红包 ¥${data.amount}！`);
        // 重新获取优惠券列表
        fetchCoupons();
      }
    });

    // 监听批量优惠券过期通知
    socket.on('coupons_batch_expired', (data) => {
      console.log('收到批量优惠券过期通知:', data);
      Toast.show(`系统更新了 ${data.totalExpired} 张过期优惠券`);
      // 重新获取优惠券列表
      fetchCoupons();
    });

    // 首次加载数据
    fetchCoupons();

    // 清理函数
    return () => {
      console.log('断开WebSocket连接');
      socket.disconnect();
      socketRef.current = null;
    };
  }, []);

  // 根据状态过滤优惠券
  const filterCoupons = (status: string): Coupon[] => {
    if (status === 'all') {
      return coupons;
    }
    
    // 将前端状态映射到中文状态
    const statusMap: { [key: string]: string } = {
      'available': '可使用',
      'used': '已使用',
      'expired': '已过期'
    };
    
    const chineseStatus = statusMap[status] || status;
    return coupons.filter(coupon => coupon.status === chineseStatus);
  };

  // 格式化时间
  const formatDate = (timeString: string): string => {
    if (!timeString) return '-';
    
    const date = new Date(timeString);
    
    // 确保使用北京时间（UTC+8）
    const beijingTime = new Date(date.getTime() + (8 * 60 * 60 * 1000));
    
    const year = beijingTime.getUTCFullYear();
    const month = String(beijingTime.getUTCMonth() + 1).padStart(2, '0');
    const day = String(beijingTime.getUTCDate()).padStart(2, '0');
    const hours = String(beijingTime.getUTCHours()).padStart(2, '0');
    const minutes = String(beijingTime.getUTCMinutes()).padStart(2, '0');
    const seconds = String(beijingTime.getUTCSeconds()).padStart(2, '0');
    
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };

  // 获取优惠券颜色
  const getCouponColor = (type: string): string => {
    switch (type) {
      case '满减':
        return '#ff4d4f';
      case 'VIP专享券':
        return '#faad14';
      case '红包':
        return '#f5222d';
      default:
        return '#1890ff';
    }
  };

  // 获取状态文本
  const getStatusText = (status: string): string => {
    switch (status) {
      case '可使用':
        return '可使用';
      case '已使用':
        return '已使用';
      case '已过期':
        return '已过期';
      default:
        return '未知状态';
    }
  };

  // 渲染优惠券列表
  const renderCouponList = (status: string) => {
    const filteredCoupons = filterCoupons(status);
    
    if (loading) {
      return <div className="loading">正在加载...</div>;
    }

    if (filteredCoupons.length === 0) {
      // 将英文状态转换为中文显示
      const statusMap: { [key: string]: string } = {
        'available': '可使用',
        'used': '已使用',
        'expired': '已过期'
      };
      
      const displayStatus = status === 'all' ? '优惠券' : (statusMap[status] || status) + '的优惠券';
      
      return (
        <div className="empty-state">
          <p>暂无{displayStatus}</p>
        </div>
      );
    }

    return (
      <div className="coupon-list">
        {filteredCoupons.map(coupon => (
          <Card key={coupon.id} className={`coupon-card ${coupon.status === '已过期' ? 'expired' : ''}`} data-type={coupon.type} data-status={coupon.status}>
            <div className="coupon-header">
              <div className="coupon-type">
                <Tag color={coupon.status === '已过期' ? '#999' : getCouponColor(coupon.type)}>
                  {coupon.type}
                </Tag>
                <span className="coupon-name">{coupon.name}</span>
              </div>
              {coupon.status === '可使用' ? (
                <Button 
                  size="small" 
                  color="primary" 
                  onClick={() => handleUseCoupon(coupon)}
                >
                  去使用
                </Button>
              ) : (
                <Tag color={coupon.status === '已过期' ? '#999' : 'default'}>
                  {getStatusText(coupon.status)}
                </Tag>
              )}
            </div>
            <div className="coupon-content">
              <div className="coupon-discount">
                {coupon.type === '红包' || coupon.type === '满减' ? (
                  <span className={`discount-amount ${coupon.status === '已过期' ? 'expired' : ''}`} data-type={coupon.type}>¥{coupon.discount.toFixed(2)}</span>
                ) : (
                  <span className={`discount-amount ${coupon.status === '已过期' ? 'expired' : ''}`} data-type={coupon.type}>¥{coupon.discount.toFixed(0)}</span>
                )}
              </div>
              <div className="coupon-details">
                <p className="coupon-desc">{coupon.name}</p>
                {coupon.minAmount > 0 && (
                  <p className="min-amount">满¥{coupon.minAmount.toFixed(2)}可用</p>
                )}
                <p className="coupon-category">适用: {coupon.category}</p>
                <div className="coupon-time">
                  <span>有效期: {formatDate(coupon.startTime)} - {formatDate(coupon.endTime)}</span>
                </div>
                {coupon.usedTime && (
                  <p className="used-time">使用时间: {formatDate(coupon.usedTime)}</p>
                )}
              </div>
            </div>
          </Card>
        ))}
      </div>
    );
  };

  const tabs = [
    { key: 'all', title: '全部' },
    { key: 'available', title: '可使用' },
    { key: 'used', title: '已使用' },
    { key: 'expired', title: '已过期' }
  ];

  return (
    <div className="coupon-container">
      <NavBar 
        onBack={handleBack} 
        back="返回"
      >
        我的卡券
      </NavBar>
      <div className="coupon-content">
        <Tabs defaultActiveKey="all">
          {tabs.map(tab => (
            <Tabs.Tab title={tab.title} key={tab.key}>
              {renderCouponList(tab.key)}
            </Tabs.Tab>
          ))}
        </Tabs>
      </div>
    </div>
  );
};

export default Coupon;